<template>
	<view class="container">
		<navbar background="#407DFA" color='#fff'></navbar>
		<view class="wrap">
			<view class="contact-img-wrap">
				<view class="contact-left">
					<image src='../img/contact-us.png'></image>
					<view class="title" @tap='get_mobile'>{{mobile}}</view>
					<view class="title title2">{{desc}}</view>
					<!-- <view></view> -->
				</view>
				<view class="img">
					<image src='../img/concat-img.png'></image>
				</view>
			</view>
			<view class="contact-bg-wrap">
				<image src='../img/contact-bg.png'></image>
				<view class="contact-code-con">
					<view class="code">
						<image :src='code' show-menu-by-longpress='true'></image>
					</view>
					<view class="line"></view>
					<view class='tip'>扫一扫二维码添加官方客服微信</view>
				</view>
			</view>
			<view class="btn line_center" @click="download()">保存联系方式</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				code: '',
				mobile: '',
				desc: ''
			};
		},
		onLoad() {
			this.getKufu()
		},
		methods: {
			// 我的客服
			getKufu() {
				let that = this;
				app.globalRequest({
					api: app.getApi().user.getKufu,
				}).then(res => {
					if (res.code == 1) {
						that.mobile = res.data.mobile
						that.code = res.data.qrcode
						that.desc = res.data.custom_desc
					}
				}).catch(err => {

				})
			},
			get_mobile() {
				let that = this;
				uni.makePhoneCall({
					phoneNumber: that.mobile,
					success: function() {
						console.log('拨打电话成功！');
					},
					fail: function() {
						console.log('拨打电话失败！');
					}
				});
			},
			download() {
				uni.downloadFile({
					url: this.code,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							//图片路径，不支持网络图片路径
							filePath: res.tempFilePath,
							success: (res) => {
								uni.hideLoading();
								setTimeout(() => {
									return uni.showToast({
										title: "保存成功"
									});
								}, 1500)

							},
							fail: (res) => {

							},
							complete: (res) => {
								uni.hideLoading();
							},
						})

					}

				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		background: #407DFA;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.contact-img-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx 0 48rpx;

		.contact-left {
			image {
				width: 192rpx;
				height: 58rpx;
				margin-bottom: 36rpx;
			}

			.title {
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 42rpx;
			}
			.title2{
				margin-top:26rpx
			}
		}

		.img {
			width: 188rpx;
			height: 188rpx;
			flex-shrink: 0;
		}
	}

	.contact-bg-wrap {
		width: 640rpx;
		height: 702rpx;
		margin: 80rpx auto 0;
		position: relative;

		.contact-code-con {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;

			.code {
				width: 368rpx;
				height: 368rpx;
				margin: 96rpx auto 0;
			}

			.line {
				width: 548rpx;
				height: 0rpx;
				border: 2rpx dashed #707070;
				margin: 50rpx auto 0;
			}

			.tip {
				font-size: 24rpx;
				color: #D5D7D9;
				line-height: 42rpx;
				text-align: center;
				padding-top: 80rpx;
			}
		}
	}

	.btn {
		width: 640rpx;
		height: 94rpx;
		background: #7BA0EC;
		border-radius: 48rpx;
		color: #fff;
		font-size: 32rpx;
		margin: 156rpx auto;
	}

	
</style>